<!--
 * @Author: Li Zengkun
 * @Date: 2022-09-07 20:58:23
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-09-07 21:11:24
 * @Description: 
-->
<template>
  <a-card hoverable :style="{ width: '300px', marginBottom: '20px'}">
    <div
      :style="{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
      }"
    >
      <span
        :style="{ display: 'flex', alignItems: 'center', color: '#1D2129' }"
      >
        <a-avatar
          :style="{ marginRight: '8px', backgroundColor: 'rgb(var(--red-6))' }"
          :size="28"
        >
          B
        </a-avatar>
        <a-typography-text>ComponentB</a-typography-text>
      </span>
      <span>{{props.num}}</span>
    </div>
  </a-card>
</template>
 
<script setup>
import { ref, reactive } from "vue";
const props = defineProps(["num"]);
</script>

<style lang='less' scoped>
.arco-card{
    background: rgb(var(--red-2));
    font-weight: 800;
}
</style>
